{extend name="public/layer_base"}

{block name="style"}
{css href="__PUBLIC__static/admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"}
{/block}

{block name="main"}
<article class="cl pd-20">
    <table class="table">
        <tr>
            <td width="200" class="va-t"><ul id="treeDemo" class="ztree"></ul></td>
            <td class="va-t">
                <form action="?" method="post" class="form form-horizontal category" id="form-user-add">
                    <input type="hidden" value="{$data.pid|default=0}"  name="pid">
                    <input type="hidden" value="{$data.id|default=0}"  name="id">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-4"><span class="c-red">*</span>分类名称：</label>
                        <div class="formControls col-8">
                            <input type="text" class="input-text" value="{$data.name|default=''}" placeholder="" name="name">
                        </div>
                        <div class="col-8"> </div>
                    </div>
                    <div class="row cl">
                        <div class="col-9 col-offset-2">
                            <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                        </div>
                    </div>
                </form>
            </td>
        </tr>
    </table>
</article>
{/block}

{block name="javascript"}
{js href="__PUBLIC__static/admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"}
<script type="text/javascript">
    SCOPE.cropper_aspect_ratio = 1.74;
    SCOPE.image_type = 'category';

    var setting = {
        view: {
            dblClickExpand: false,
            showLine: false,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.selectNode(treeNode);
                $("input[name='pid']").val(treeNode.id);
            }
        }
    };

    var zNodes ={$ztree};

    var code;

    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){
        var t = $("#treeDemo");
        t = $.fn.zTree.init(t, setting, zNodes);
//        demoIframe = $("#testIframe");
//        demoIframe.bind("load", loadReady);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(zTree.getNodeByParam("id",'{$data.pid|default=0}'));
    });
</script>
{/block}